import { Spin } from 'antd';
import Editor from 'react-simple-code-editor';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike'; // clike
import 'prismjs/components/prism-bash'; // bash
import 'prismjs/themes/prism.css';
const Edit = (props) => {
    const {  loading, record,onValueChange } = props;
    return (
        <Spin tip="正在处理..." spinning={loading}>

            <div style={{ padding: "10px" }}>
                <Editor
                    value={record.code}
                    onValueChange={code => {
                        const newRecord = { ...record, code };
                 
                        onValueChange(newRecord)

                    }}
                    highlight={code => {
                        return highlight(code, languages.bash);
                    }}
                    padding={10}
                    style={{
                        fontFamily: '"Fira code", "Fira Mono", monospace',
                        fontSize: 12,
                        minHeight: "200px",
                        overflow: "auto",
                        border: "1px solid #f3f3f3",

                    }}
                />
            </div>
        </Spin>
    );
};

export default Edit;